    
      
		
<template>
	<u-card>
	  <template #head>
	    <u-input v-model="nameFilter" type="text" border placeholder="搜索聊天记录、用户" />
	    <u-icon name="search" color="#2979ff" size="28" style="position: absolute;top: 50%;right: 30px;transform: translate(0,-50%);" />
	  </template>
		<u-swipe-action :show="item.show" :index="index" 
			v-for="(item, index) in list"
      :key="item.id"
      slot="body"
			@click="click" @open="open"
			:options="options"
		>
			<view class="item u-border-bottom" >
				<u-avatar :src="item.images" style="margin-right: 10px;" />
				<view class="title-wrap">
          <view  class="title" style="display: flex;justify-content: space-between;">
            <text style="font-size: 1.15em;color: #000;">{{ item.name }}</text>
            <text>{{item.time}}</text>
          </view>
          <text class="title">{{ item.content }}</text>
				</view>
        <u-badge v-show="item.num" type="error" :count="item.num" style="top: 50%;transform: translate(0,-50%);" />
			</view>
		</u-swipe-action>
	</u-card>
</template>

<script>
  import { getImg } from '@/api/elseApis.js'
  import { dateFormat,timeSleep } from '@/util/Functions.js'
  import { cloneDeep } from 'lodash'
	export default {
		data() {
			return {
        nameFilter:'',
				list: [{
            id: 1,
            name:'官方消息',
            content:'长安回望绣成堆，山顶千门次第开，一骑红尘妃子笑，无人知是荔枝来',
						images: 'https://cdn.uviewui.com/uview/common/logo.png',
            time:'星期日',
            num:2,
						show: false
					},
				],
				options: [{
						text: '置顶',
						style: {
							backgroundColor: '#007aff'
						}
					},{
						text: '删除',
						style: {
							backgroundColor: '#dd524d'
            }
          },
        ],
        // intrl:null,
			};
		},
    async onPullDownRefresh() {
    	await this.mockinfo('陌生人','oho你好啊')
      uni.stopPullDownRefresh()
    },
    async onLoad() {
      await this.mockinfo('一柯小白菜','[图片]')
      await timeSleep(5000)
      await this.mockinfo('小鱼儿','你好')
    },
    onUnload(){
      // clearInterval(this.intrl)
    },
		methods: {
      async mockinfo(name,content){
        const { imgurl:images } = await getImg()
        const time = new Date()
        const info = {
          id:time - 1,
          images,
          name,
          content,
          time:dateFormat('hh:mm:ss',time),
          num:1,
          show:false,
        }
        this.list.push(info)
      },
			click(index, index1) {
				if(index1 == 1) {//1:删除
					this.list.splice(index, 1);
				} else {//0:置顶
          const item = cloneDeep(this.list[index])
          this.list.splice(index, 1)
          this.list.unshift(item)
          setTimeout(()=>{
            item.show = false
          },500)
				}
			},
			// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
			open(index) {
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				this.list[index].show = true;
				this.list.map((val, idx) => {
					if(index != idx) this.list[idx].show = false;
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.item {
		display: flex;
		padding: 20rpx;
	}
	
	.title {
    display: block;
    width: 480rpx;
    overflow: hidden;
		text-align: left;
		font-size: 28rpx;
    white-space:nowrap;
    text-overflow: ellipsis;
		color: $u-content-color;
	}
  /deep/.u-card__body{
    padding: 0 !important;
  }
  /deep/.u-btn-text{
    white-space:nowrap;
  }
</style>